<template>
	<view class="app-container" :style="{height: `calc(100vh - ${getHeight}px)`}">
		<u-sticky offsetTop="0" customNavHeight="0">
			<view class="navbar">
				<view :class="current == 0 ? 'current text':'text'" @click="toggle(0)">
					即将开始
				</view>
				<view :class="current == 1 ? 'current text':'text'" @click="toggle(1)">
					历史课程
				</view>
			</view>
		</u-sticky>
		<view class="row-a1">
			<view class="list">
				<u-list @scrolltolower="scrolltolower" height="100%">
					<u-list-item v-for="(item, index) in dataList" :key="item._id">
						<view class="item">
							<view class="con-a1">
								<view class="name">
									{{item.className}}
								</view>
								<view
									:class="item.status == 1 ? 'status wait':item.status == 2?'status in':item.status == 3?'status over':'status cancel'">
									{{item.status == 1 ? '等待中' : item.status == 2 ? '进行中' : item.status == 3 ? '已结束' : '已取消'}}
								</view>
							</view>
							<view class="con-a2">
								<view class="icon">
									<u-icon name="account-fill" size="18"></u-icon>
								</view>
								<view class="name">
									{{ item.teacher.name[0]+"老师"}}
								</view>
							</view>
							<view class="con-a3">
								<view class="date">
									<view class="icon">
										<u-icon name="calendar-fill" size="18"></u-icon>
									</view>
									<view class="data">
										{{formatDate(item.classDate)}}
									</view>
								</view>
								<view class="time">
									<view class="icon">
										<u-icon name="clock-fill" size="18"></u-icon>
									</view>
									<view class="data">
										{{ item.classTime[0] }} - {{ item.classTime[1] }}
									</view>
								</view>
								<view class="link">
									<view class="icon">
										<u-icon name="attach" size="18" color="#2563eb"></u-icon>
									</view>
									<view class="data">
										上课链接
									</view>
								</view>
							</view>
							<u-line></u-line>
							<view class="btns">
								<view class="btn in" v-if="item.status != 3 && item.status != 4">
									上课
								</view>
								<view class="btn cancel" v-if="item.status != 3 && item.status != 4" @click="cancel(item)">
									取消预约
								</view>
								<view class="btn inf" @click="detail(item)">
									查看详情
								</view>
							</view>
						</view>
					</u-list-item>
					<u-list-item>
						<view class="loading">
							<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="加载更多"
								nomore-text="没有更多了" />
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<u-popup mode="center" round="10" :show="show" @close="close" @open="open">
			<view class="row-popup">
				<view class="tit">
					取消课程确认
				</view>
				<view class="info">
					<view class="txt">
						课程:{{row.className}}
					</view>
					<view class="txt">
						时间:{{ row.classTime[0] }}-{{ row.classTime[1] }}
					</view>
					<view class="txt">
						日期:{{formatDate(row.classDate)}}
					</view>
				</view>
				<view class="tips">
					<view class="icon">
						<u-icon name="info-circle-fill" size="12" color="#854d0e"></u-icon>
					</view>
					<view class="desc">
						24小时内取消,收取10%课程费用
					</view>
				</view>
				<view class="btns">
					<view class="btn">
						<u-button size="small" @click="show=false">
							关闭
						</u-button>
					</view>
					<view class="btn">
						<u-button color="#dc2626" size="small" @click="submit">
							确认取消
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<tabbar :name="1"></tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import tabbar from "@/components/tabbar/index.vue";
	import {
		classList,
		cancelClass
	} from "@/api/class/class.js";
	import {
		formatDateWeek
	} from "@/util/index.js"
	export default {
		data() {
			return {
				list: ['即将开始', '历史课程'],
				current: 0,
				dataList: [],
				show: false,
				status: "loading",
				classStatus: [1, 2],
				total: 0,
				page: {
					pageSize: 10,
					pageNum: 1
				},
				row:{
					className:"",
					classDate:"",
					classTime:["",""],
				}
			}
		},
		components: {
			tabbar
		},
		computed: {
			...mapState(['$userInfo']),
			formatDate() {
				return (date) => {
					return formatDateWeek(date);
				}
			},
			getHeight() {
				return this.$globalVariable.height;
			}
		},
		methods: {
			open() {},
			close() {
				this.show = false
			},
			scrolltolower() {
				if (this.dataList.length < this.total) {
					this.page.pageNum += 1;
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			toggle(item) {
				this.current = item;
				if (item == 0) {
					this.classStatus = [1, 2];
				} else {
					this.classStatus = [3, 4];
				}
				this.reset();
			},
			cancel(row) {
				this.show = true;
				this.row = row;
			},
			submit() {
				this.show = false;
				if(!this.$userInfo._id){
					return;
				}
				cancelClass({
					studentId: this.$userInfo._id,
					classId: this.row._id
				}).then(res => {
					if (res.code == 200) {
						this.show = false;
						this.$refs.uToast.show({
							type: "warning",
							message: "预约已取消",
							iconUrl: "https://uviewui.com/demo/toast/success.png",
						});
						this.reset();
					}
				})

			},
			reset() {
				this.status = "loading";
				this.page = {
					pageSize: 10,
					pageNum: 1
				};
				this.dataList = [];
				this.total = 0;
				this.getList();
			},
			detail(row) {
				uni.$u.route({
					url: "/subpackages/pagesA/classInfo/index",
					params: {
						_id: row._id
					}
				})
			},
			getList() {
				// 1待开始, 2进行中, 3已完成, 4已取消
				this.status = "loading";
				classList({
					studentId: this.$userInfo._id,
					...this.page,
					status: this.classStatus
				}).then(res => {
					this.dataList.push(...res.data.records);
					this.total = res.data.total;
					if (res.data.total > this.dataList.length) {
						this.status = "loadmore";
					} else {
						this.status = "nomore";
					}
				})
			}
		},
		mounted() {},
		onShow() {
			this.reset();
		},
		onLoad() {

		},
		onLaunch() {

		}
	}
</script>

<style lang="scss">
	.app-container {
		overflow: hidden;

		.navbar {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 30px 10px 10px 10px;
			background-color: #fff;
			height: 80px;
			box-sizing: border-box;

			.text {
				position: relative;
				transition: all .3s;
				width: 80px;
				text-align: center;
				font-size: 14px;
				padding: 10px 0;

				&.current {
					color: #0052d9;

					&:before {
						background-color: #0052d9;
					}
				}

				&:before {
					content: "";
					display: block;
					width: 50px;
					height: 2px;
					background-color: #ffffff;
					position: absolute;
					left: 50%;
					bottom: -6px;
					transform: translate(-50%, 0);
				}
			}
		}

		.row-a1 {
			height: calc(100% - 80px);

			.list {
				padding-top: 20rpx;
				height: 100%;
				box-sizing: border-box;

				.item {
					padding: 20rpx;
					border-radius: 10px;
					background-color: #fff;
					margin: 0 20rpx 20rpx 20rpx;

					.con-a1 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10px;

						.name {
							font-weight: bold;
						}

						.status {
							font-size: 12px;
							background-color: #dcfce7;
							padding: 2px 8px;
							border-radius: 10px;
						}
					}

					.con-a2 {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						font-size: 14px;
						margin-bottom: 10px;
					}

					.con-a3 {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						font-size: 12px;
						margin-bottom: 10px;

						.date,
						.time,
						.link {
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							margin-right: 10px;
						}

						.link {
							color: #0052d9;
						}
					}

					.u-line {
						margin-bottom: 10px !important;
					}

					.btns {
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						align-items: center;

						.btn {
							color: #fff;
							padding: 5px 12px;
							border-radius: 8px;
							font-size: 12px;
							margin-right: 20rpx;

							&.in {
								background-color: #16a34a;
							}

							&.inf {
								background-color: #2563eb;
							}

							&.edit {
								background-color: $u-warning;
							}

							&.cancel {
								color: #495561;
								background-color: #f3f4f6;
							}
						}
					}
				}

				.loading {
					padding: 20rpx;
					margin: 0 20rpx 20rpx 20rpx;
				}
			}
		}

		.row-popup {
			padding: 10px;
			width: 650rpx;

			.tit {
				margin-bottom: 10px;
			}

			.info {
				color: #8f8993;

				.txt {
					margin-bottom: 10px;
				}
			}

			.tips {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding: 10px;
				background-color: #fefce8;
				border-radius: 8px;
				margin-bottom: 10px;

				.icon {
					padding-top: 4px;
					margin-right: 5px;
				}

				.desc {
					color: #854d0e;
				}
			}

			.btns {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

			}
		}
	}
</style>